<template>
  <div class="address-box">
    <nav-bar>
      <template v-slot:left></template>
      <template v-slot:title>地址管理 </template>
    </nav-bar>

    <div class="addresslist">
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        @add="tolist"
        @edit="onEdit"
      />
    </div>
  </div>
</template>

<script>
import { toRefs, onMounted, reactive } from "vue";
import NavBar from "components/common/NavBar.vue";
import {  useRouter } from "vue-router";
import { getAddresslist } from "network/address.js";
export default {
  components: { NavBar },
  setup() {
    const router = useRouter();
 
    const tolist = () => {
      router.push({ path: "/addresslist", query: { type: "add" } });
    };
    //地址列表
    const state = reactive({
      chosenAddressId: "145",
      list: [],
    });
  
    const onEdit = (item) => {
      router.push({
        path: "/addresslist",
        query: { type: "edit", addressid: item.id },
      });
    };
    //获取地址信息
    onMounted(() => {
      getAddresslist().then((res) => {
        if (res.data.length == 0) {
          state.list = [];
          return;
        }
        state.list = res.data.map((item) => {
          return {
            id: item.id,
            name: item.name,
            tel: item.phone,
            address: `${item.province}${item.city}${item.county}${item.address}`,
            isDefault: !!item.is_default,
          };
        });
      });
    });
    return {
      ...toRefs(state),
      onEdit,
      router,
      tolist,
    };
  },
};
</script>

<style scoped>
.addresslist {
  margin-top: 50px;
  width: 100vw;
  position: absolute;
}
</style>